<template>
  <view>
    <scroll-view 
			:refresherEnabled="true" :scroll-y="true" :showScrollbar="true"
			style="height: 1000px;">
      <uni-segmented-control styleType="text" activeColor="#FBBD08" :current="current" :values="items" @clickItem="onClickItem" />
      <view>
        <view v-show="current === 0">
          <view style="width: 15px;">&nbsp;</view>
          <view class="button-list-class">
            <view :class="currentOrderBtn" @click="onCurrentOrderBtn">
              <text>当前订单</text>
            </view>
            <view style="width: 15px;">&nbsp;</view>
            <view :class="historyOrderBtn" @click="onHistoryOrderBtn">
              <text>历史订单</text>
            </view>
          </view>
          <view :style="{width: screenWidth + 'px'}" class="empty-order-bg-class">
            <view style="height: 80px;">&nbsp;</view>
            <view>
              <image style="height: 200px; width: 200px;"
                src="../../static/order/empty_order.png"
                mode="aspectFit"
              />
            </view>
            <view style="color: #AAAAAA; font-size: 12px;">
              <text>您还没有订单~</text>
            </view>
            <view style="height: 20px;">&nbsp;</view>
            <view>
              <uv-button type="primary" shape="circle" text="去点餐" :customStyle="{background: '#FBBD08', color: '#fff', border: '0px', height: '55rpx', width: '200rpx'}"></uv-button>
            </view>
          </view>
        </view>
        <view v-show="current === 1">
          <view :style="{width: screenWidth + 'px'}" class="empty-order-bg-class">
            <view style="height: 80px;">&nbsp;</view>
            <view>
              <image style="height: 200px; width: 200px;"
                src="../../static/order/empty_order.png"
                mode="aspectFit"
              />
            </view>
            <view style="color: #AAAAAA; font-size: 12px;">
              <text>暂无购买记录</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>



<script setup lang="ts">
import { ref } from 'vue'

const items = ref<string[]>([])
items.value.push("门店订单")
items.value.push("券包订单")

const current = ref<number>(0)

const onClickItem = (e: UniHelper.UniSegmentedControlOnClickItemEvent) => {
	current.value = e.currentIndex
}

const screenWidth = uni.getSystemInfoSync().screenWidth

const currentOrderBtn = ref<string[]>([])
currentOrderBtn.value.push("button-cst-class")

const historyOrderBtn = ref<string[]>([])
historyOrderBtn.value.push("white-bg-class")


const onHistoryOrderBtn = () => {
  currentOrderBtn.value.pop()
  currentOrderBtn.value.push("white-bg-class")
  historyOrderBtn.value.pop()
  historyOrderBtn.value.push("button-cst-class")
}

const onCurrentOrderBtn = () => {
  currentOrderBtn.value.pop()
  currentOrderBtn.value.push("button-cst-class")
  historyOrderBtn.value.pop()
  historyOrderBtn.value.push("white-bg-class")
}

</script>


<style lang="scss">
page {
  background-color: #F7F8FA;
}
</style>

<style lang="scss" scoped>

.white-bg-class {
  background-color: #FFFFFF;
  height: 50rpx;
  width: 120rpx;
	position:relative;
  border-radius: 12px;
  color: black;
  font-size: 11px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.empty-order-bg-class {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-list-class {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>

<style scoped>

.button-cst-class {
  height: 50rpx;
  width: 120rpx;
	position:relative;
  border-radius: 12px;
  background-color:#FBBD08;

  color: #FFFFFF;
  font-size: 11px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}

.button-cst-class::before, .button-cst-class::after {
	width:0px;
	height:0px;
	border:transparent solid;
	position:absolute;
	top:100%;
	content:""
}

.button-cst-class::after {
	border-width: 5px;
  border-top-color: #FBBD08;
	left:45%;
}
</style>